<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">

    <!--    引入markdown的css文件-->
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.css"
          th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>


<!--导航的部分--><!--有线程的组件-->
<nav class="ui inverted vertical attach segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <!--左边的导航-->
        <div class="ui secondary inverted stackable menu">
            <h2 class="ui header teal item">后台管理</h2>
            <a href="#" th:href="@{/admin/blogmanage}" class="m-item item m-mobile-hide active"><i class="mini home icon"></i>博客</a>
            <a href="#" th:href="@{/admin/blogtypes}" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
            <a href="#" th:href="@{/admin/blogtags}" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
            <div class="right menu m-mobile-hide">
                <div class="ui dropdown item">
                    <img src="https://picsum.photos/id/1005/800/400" th:src="${session.user.avatar}" alt=""
                         class="ui avatar image">
                    <div class="text">
                        <span th:text="${session.user.nickname}">Timous</span>
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
        <!--        加一个隐藏的图标-->
        <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </div>
</nav>


<!--二级导航-->
<div class="ui attached menu">

    <div class="ui container">

        <div class="right menu">

            <a href="#" th:href="@{/admin/blogs/blogpublished}" class="active teal item">发布</a>
            <a href="#" th:href="@{/admin/blogmanage}" class="item">列表</a>

        </div>


    </div>

</div>


<!--中间的内容-->
<div class="m-padded-tb-massive m-container">
    <div class="ui container">


        <form action="#" id="blog-form" th:object="${blog}" th:action="@{/admin/blogs/update}" method="post"
              class="ui form">

            <input type="hidden" name="published">
            <input type="hidden" name="id" th:value="*{id}">


            <div class="require field">


                <div class="ui left labeled input">

                    <div class="ui selection compact teal basic dropdown label">
                        <input type="hidden" value="原创" name="flag" th:value="*{flag}">
                        <i class="dropdown icon"></i>
                        <div class="text">原创</div>


                        <div class="menu">

                            <div class="item" data-value="原创">原创</div>
                            <div class="item" data-value="转载">转载</div>
                            <div class="item" data-value="翻译">翻译</div>

                        </div>
                    </div>

                    <input type="text" name="title" th:value="*{title}" placeholder="标题">

                </div>

            </div>


            <div class="required field">
                <!--之后会替换编辑器-->
                <div id="md-content" style="z-index: 1 !important;">
                    <textarea name="content" placeholder="博客内容" th:text="*{content}" style="display: none"></textarea>
                </div>


            </div>


            <div class="two fields">

                <div class="required field">

                    <div class="ui left labeled action input">

                        <label class="ui teal basic compact label">分类</label>
                        <div class="ui  selection fluid dropdown">

                            <input type="hidden" name="type.id" th:value="*{type.id}">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">

                                <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}"
                                     th:text="${type.name}">错误日志
                                </div>

                                <!--/*-->
                                <div class="item" data-value="1">错误日志</div>
                                <div class="item" data-value="1">开发者手册</div>
                                <!--*/-->

                            </div>

                        </div>

                    </div>

                </div>


                <div class="field">

                    <div class="ui left labeled action input">

                        <label class="ui teal basic compact label">标签</label>
                        <div class="ui fluid selection multiple search  dropdown">

                            <input type="hidden" name="tagIds" th:value="*{tagIds}">
                            <i class="dropdown icon"></i>
                            <div class="default text">标签</div>
                            <div class="menu">

                                <div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}"
                                     th:text="${tag.name}">错误日志
                                </div>

                                <!--/*-->
                                <div class="item" data-value="1">java</div>
                                <div class="item" data-value="2">script</div>
                                <!--*/-->
                            </div>

                        </div>

                    </div>

                </div>

            </div>
            <!--首图的地址-->
            <div class="required field">

                <div class="ui left labeled input">

                    <label class="ui teal label">首图</label>
                    <input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder="首图引用地址">

                </div>


            </div>
            <div class="required field">

                <textarea name="description" placeholder="博客描述" th:text="*{description}"></textarea>

            </div>


            <div class="inline fields">

                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="recommend" name="recommend" checked th:cheaked="*{recommend}"
                               class="hidden">
                        <label for="recommend">推荐</label>
                    </div>
                </div>

                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" th:checked="*{shareStatus}" id="shareStatus" name="shareStatus"
                               class="hidden">
                        <label for="shareStatus">转载声明</label>
                    </div>
                </div>

                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" th:checked="*{apprication}" id="apprication" name="apprication"
                               class="hidden">
                        <label for="apprication">赞赏</label>
                    </div>
                </div>

                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" th:checked="*{commentAbled}" id="commentAbled" name="commentAbled"
                               class="hidden">
                        <label for="commentAbled">评论</label>
                    </div>
                </div>

            </div>


            <div class="ui error message"></div>

            <div class="ui right aligned container">

                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>

                <button type="button" id="save-btn" class="ui secondary button">保存</button>

                <button type="button" id="published-btn" class="ui teal button">发布</button>

            </div>

        </form>


    </div>
</div>


<!--底部的内容-->
<footer class="ui segment inverted vertical me-padded-td-mini">
    <div class=" m-padded-tb-massive ui center aligned container">
        <!--grid会把整个页面分成16分-->
        <div class="ui divided  inverted stackable grid ">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/wechat.png" th:src="@{/images/wechat.png}"
                             class="ui rounded image" alt="" style="width:110px;">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/wechat.png" th:src="@{/images/wechat.png}"
                             class="ui rounded image" alt="" style="width:110px;">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-space m-opacity-mini">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item m-text-thin m-text-space m-opacity-mini">Email：1844736251@qq.com</a>
                    <a href="#" class="item m-text-thin m-text-space m-opacity-mini">QQ:1844736251</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-space m-opacity-mini">本网站营业时间</h4>
                <div id="time"></div>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-space m-opacity-mini">Copyright © 2020-2021 Timous Designed By 陈留红</p>
    </div>
</footer>
<script>

    // 运行时间统计
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }

    function setTime() {
        /*此处为网站的创建时间*/
        var create_time = Math.round(new Date(Date.UTC(2020,  1, 25, 15, 15, 15)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
        document.getElementById("time").innerHTML = currentTimeHtml;
    }

    setInterval(setTime, 1000);


    function page(obj) {
        $("[name='page']").val($(obj).data("page"));
        //完成动态的局部刷新
        loaddata();
    }

    //发送ajax请求   结合后面的请求，就是通过ajax的请求，来进行获取后台的表格的数据
    function loaddata() {
        $("#table-container").load(/*[[@{/admin/blogmanage/search}]]*/"/admin/blogmanage/search", {
            title: $("[name='title']").val(),
            typeId: $("[name='typeId']").val(),
            recommend: $("[name='recommend']").prop('checked'),
            page: $("[name='page']").val()
        });
    }

    $("#search-button").click(
        function () {
            $("[name='page']").val(0);
            loaddata();
        }
    )


    //通过ajax动态获取数据，来进行数据的刷新  适合数据比较多的数据，我们采用开始的时候的初始化

    /*消息提示关闭初始化 关闭消息的提示信息*/
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });

    //点击按钮清除
    $('#clear-btn').on('click', function () {
        $('.ui.type.dropdown').dropdown('clear');
    });
</script>
<!-- 引入Jquery-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

<!--引入markdown的js-->
<script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
<script src="../../static/js/me.js" th:src="@{/js/me.js}"></script>


<script>

    /*初始化markdown编辑器*/
    var testEditor;

    $(function () {
        testEditor = editormd("md-content", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: "/lib/editormd/lib/"
        });

    });
</script>
<script src="../static/js/heart.js" th:src="@{/js/heart.js}"></script>
<script>
    $("#save-btn").click(function () {
        $('[name="published"]').val(false);
        $("#blog-form").submit();
    });

    $("#published-btn").click(function () {
        $('[name="published"]').val(true);
        $("#blog-form").submit();
    });

    $('.ui.form').form({


        fields: {
            title: {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客标题'
                }]
            },
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客内容'
                }]
            },
            typeId: {
                identifier: 'typeId',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客类型'
                }]
            },
            firstPicture: {
                identifier: 'firstPicture',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客首图'
                }]
            },
            description: {
                identifier: 'description',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客描述'
                }]
            }
        }
    });
</script>
<script>

    // 运行时间统计
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }

    function setTime() {
        /*此处为网站的创建时间*/
        var create_time = Math.round(new Date(Date.UTC(2020,  1, 25, 15, 15, 15)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
        document.getElementById("time").innerHTML = currentTimeHtml;
    }

    setInterval(setTime, 1000);


    function page(obj) {
        $("[name='page']").val($(obj).data("page"));
        //完成动态的局部刷新
        loaddata();
    }

    //发送ajax请求   结合后面的请求，就是通过ajax的请求，来进行获取后台的表格的数据
    function loaddata() {
        $("#table-container").load(/*[[@{/admin/blogmanage/search}]]*/"/admin/blogmanage/search", {
            title: $("[name='title']").val(),
            typeId: $("[name='typeId']").val(),
            recommend: $("[name='recommend']").prop('checked'),
            page: $("[name='page']").val()
        });
    }

    $("#search-button").click(
        function () {
            $("[name='page']").val(0);
            loaddata();
        }
    )


    //通过ajax动态获取数据，来进行数据的刷新  适合数据比较多的数据，我们采用开始的时候的初始化

    /*消息提示关闭初始化 关闭消息的提示信息*/
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });

    //点击按钮清除
    $('#clear-btn').on('click', function () {
        $('.ui.type.dropdown').dropdown('clear');
    });
</script>

</body>
</html>